<template>
  <div class="wrapBox">
    <div class="wrap">
    <h1 class="txt haruyuki-color-primaryblue">重置密码</h1>
    <div class="stopWrap">
      <div class="topStop">
        <el-steps :space="400" :active="active" align-center process-status='finish'>
          <el-step title="重置密码"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>
      <div v-if="active == 0">
        <el-form :model="pwdForm" ref="pwdForm" class="formWrap" :rules="rules">
          <el-form-item prop="phone">
            <el-input v-model.number="pwdForm.phone" placeholder="手机号" maxlength="11">
              <template slot="append">
                <el-button class="btnCode" type="primary" @click="signing()" :disabled="mBtn">
                  <span v-show="!mBtn">获取验证码</span>
                  <span v-show="mBtn">重新发送{{second}}S</span>
                </el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="code"
            :rules="[
              { required: true, message: '验证码不能为空'}
            ]"
          >
            <el-input v-model.trim="pwdForm.code" placeholder="验证码" maxlength="6"></el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <!-- <el-input type="password" v-model="pwdForm.pass" placeholder="密码" maxlength="15"></el-input> -->
            <el-input type="password" v-model="pwdForm.pass" placeholder="密码" show-password maxlength="15"></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input type="password" v-model="pwdForm.checkPass" placeholder="确认密码" show-password maxlength="15"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="footer">
              <el-button plain class="btnWidth" @click="goTo">去登录</el-button>
              <el-button type="primary" class="btnWidth" :disabled="!pwdForm.code" @click="activeClick()">下一步</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="active == 1">
        <div class="success">
          <i class="el-icon-success"></i>
          <div class="success-txt">操作成功</div>
          <el-button class="btn-success" type="primary" size="medium" @click="goTo()">去登录</el-button>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  import {info} from "@/api/system/tenant";
  import {getTopUrl} from "@/util/util";
  import {getSmsCode,submit} from "@/api/rb-service/forgetPassword/forgetPassword";
  import md5 from 'js-md5';

  export default {
    name: "forgetPassword",
    data() {
      return {
        active:0,
        pwdForm:{
          tenantId:'',
          phone:"",
          code:"",
          pass:"",
          checkPass:"",
        },
        rules:{
          phone:[
            { pattern: /^1[0-9]{10}$/, message: '手机号格式不正确', trigger: 'blur' }
          ],
          pass: [
            { required: true,pattern:/^[a-zA-Z0-9]{5,15}$/, message: '密码5-15位，由英文、数字组成', trigger: 'blur' },
          ],
          checkPass: [
            { required: true,pattern:/^[a-zA-Z0-9]{5,15}$/, message: '密码5-15位，由英文、数字组成', trigger: 'blur' },
          ]
        },
        mBtn:false,
        second:0,
        timer:null,
        timeStamp:'',
        sign:''
      };
    },
    created() {
      this.getTenant();
    },
    methods: {
      goTo(){
        this.$router.push({path: '/login'});
      },
      /* 步骤 */
      activeClick(){
        if(this.pwdForm.pass !== this.pwdForm.checkPass){
          this.$message.error('两次密码不一致！');
          return false;
        }else{
          this.$refs['pwdForm'].validate((valid) => {
            if (valid) {
              let param ={
                smsCodeType:'2',
                mobile:this.pwdForm.phone,
                smsCode:this.pwdForm.code,
                password:this.pwdForm.pass,
                tenantId:this.pwdForm.tenantId,
                userType:this.website.userTypeState
              }
              submit(param).then(()=>{
                this.active=1;
              },error=>{
                window.console.log(error);
                this.active=0;
                this.pwdForm.code="";
              })
            }else {
              return false;
            }
          })
        }
      },
      /* 获取验证码 */
      signing(){
        // 发送验证码 API
        if(!this.pwdForm.phone){
          this.$refs.pwdForm.validateField('phone');
        }else{
           // 获取时间戳
          this.timeStamp=Date.now();
          // RuiSY+时间戳+手机号 md5加密 传sign
          this.sign=md5('RuiSY'+this.timeStamp+this.pwdForm.phone);
          let param ={
            smsCodeType:'2',
            mobile:this.pwdForm.phone,
            tenantId:this.pwdForm.tenantId,
            sign:this.sign,
            timeStamp:this.timeStamp
          }
          getSmsCode(param).then(()=>{},error=>{
            window.console.log(error);
            this.mBtn = false;
            clearInterval(this.timer);
            this.timer = null;
            this.pwdForm.code="";
          })
          // 发送验证码倒计时
          if (!this.timer) {
            this.second = 90;
            this.mBtn = true;
            this.timer = setInterval(() => {
              if (this.second > 0 && this.second <= 90) {
                this.second--;
              } else {
                this.mBtn = false;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        }
      },
      /* tenantId */
      getTenant() {
        let domain = '';
        if(process.env.NODE_ENV === 'production'){
          domain = getTopUrl();
        }else{
          // 临时指定域名，方便测试
          domain = window.location.href.split(":1")[0];
        }

        info(domain).then(res => {
          const data = res.data;
          if (data.success && data.data.tenantId) {
            this.pwdForm.tenantId = data.data.tenantId;
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
.wrapBox{
  height: calc(100vh);
  background-color: #f2f2f2;
}
.txt{
  text-align: center;
  font-weight: 400;
  padding: 54px 0 26px;
  margin: 0;
}
.wrap{
  width: 900px;
  margin: 0 auto;
}
.stopWrap{
  background-color: #fff;
  padding-bottom: 50px;
  min-height: 500px;
  border-radius: 4px;
  .topStop{
    padding: 50px 0 70px;
  }
}
.formWrap{
  width: 400px;
  margin: auto;
}
.footer{
  display: flex;
  justify-content: space-between;
}
.btnWidth{
  width: 100%;
}
/deep/ .el-input-group__append{
  background: #409eff;
  color: #fff;
}
.btnCode{
  width: 100px;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.success{
  width: 200px;
  margin:0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  /deep/ .el-icon-success{
    font-size: 64px;
    color: #67C23A;
    display: flex;
    justify-content: center;
  }
  .success-txt{
    color: #606266;
    font-size: 14px;
    text-align: center;
    padding: 10px 0 50px;
  }
}

/deep/ .el-steps{
  display: flex;
  justify-content: center;
}
</style>
